<template>
  <div class="dongtai">
    <!-- 右边内容 -->
    <div class="concents">
      <img src="../assets/imgs_about/zxdt_z.png" alt="" />
      <!-- 引入组件 -->
      <dongdai-cell v-for="(item, i) in items" :key="i" :item="item" />
      <!-- 分页 -->
      <div class="pagination">
        <span @click="now--" :class="{ disabled: now == 1 }">上一页</span>
        <span
          :class="{ active: now == n }"
          @click="now = n"
          v-for="n in 18"
          :key="n"
          >{{ n }}</span
        >
        <span @click="now++" :class="{ disabled: now == 18 }">下一页</span>
      </div>

      <!-- <el-pagination background layout="prev, pager, next" :total="20">
          </el-pagination> -->
    </div>
  </div>
</template>

<script>
import DongdaiCell from "@/components/DongdaiCell.vue";
export default {
  components: { DongdaiCell },
  data() {
    return {
      activeIndex: "1",
      now: 1,
      items: [
        {
          img: "/img_about/1.jpg",
          title: "怀柔六居北欧轻奢精品民宿小院，面积：1500平米",
          date: "22-09-16",
          des: "整院由著名设计团队精心设计打造的多元素相碰撞的视觉艺术作品，独立院落架于半山之间，心型大露台上远眺山野，尽情呼吸这栗花溪谷的清幽。建筑面积450平米，一栋新式西域风格建筑和一排70多年前的老建筑改建而成，新楼两层白色弧形建筑，大落地弧形玻璃无敌山景。",
        },
        {
          img: "/img_about/2.jpg",
          title:
            "众信旅游集团打造一站共享式休闲度假综合体 优沃得世界主题亲子农场撬动百亿亲子游市场",
          date: "22-07-19",
          des: "近日，由众信旅游集团倾力打造的一站共享式休闲度假综合体---优沃得世界主题亲子自然教育农场将于2022年7月23日盛大开业。",
        },
        {
          img: "/img_about/3.jpg",
          title: "2022中国青少年高尔夫球精英赛即将启幕",
          date: "22-07-07",
          des: "在骄阳似火的八月盛夏，2022中国青少年高尔夫球精英赛即将火热启幕！由中国高尔夫球协会主办，海南省旅游和文化广电体育厅支持，众信博睿承办的“2022中国青少年高尔夫球精英赛”将在海南省中海神州高尔夫球会蓄势待发，大赛开杆在即。",
        },
        {
          img: "/img_about/4.jpg",
          title:
            "在京团队游业务按下“重启键” 众信旅游推出多元化本地游产品助力市场回暖",
          date: "22-06-14",
          des: "近日，北京市发布最新防控措施，自6月6日起，除丰台区全域及昌平区部分区域外，有序恢复正常生产生活秩序，北京市旅行社市民在京团队旅游恢复经营。随着本轮疫情形势不断向好，全市各行各业也稳步进入到复工复产中。",
        },
        {
          img: "/img_about/5.jpg",
          title: "北京环球度假区 重要通知",
          date: "22-05-26",
          des: "【2022年5月1日】北京环球度假区接到政府有关部门的通知，为落实疫情防控要求，配合开展新冠肺炎疫情流行病学调查，同时出于对游客和员工健康及安全的审慎考虑，北京环球度假区已在疾控部门指导下立即启动防疫应急预案。北京环球影城主题公园、北京环球城市大道自5月1日起暂时关闭。对于受到影响的游客，我们将通过原购票渠道为您办理退票或改期，稍后将发布具体退改指引。",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
}

.concents {
  // width: 950px;
  padding-bottom: 90px;
  // border: 1px solid red;
  position: relative;

  > img {
    width: 96px;
    height: 26px;
    background-size: contain;
    margin-top: 40px;
  }

  > .pagination {
    position: absolute;
    right: 0px;
    bottom: 40px;

    > span {
      font-size: 12px;
      cursor: pointer;
      padding: 3px 8px;
      background: #fff;
      margin-right: 4px;
      user-select: none;
      border: 1px solid #ddd;
      border-radius: 4px;
      color: #aaa;

      &.active {
        background-color: #fbb957;
      }

      &.disabled {
        pointer-events: none;
        color: #ccc;
        border-color: #bbb;
      }
    }
  }
}
</style>
